<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css" />
		<script src="js/jquery.min.js"></script>
		<script src="js/qrcode.js"></script>
		<style type="text/css">
			.mui-grid-9 {
				background: white !important;
			}
			
			li {
				border-left: none !important;
			}
			
			img {
				width: 50px;
			}
			
			body {
				background: transparent !important;
			}
			
			.mui-content {
				background: white;
				text-align: center;
			}
		</style>
		<style>
			#update_icon {
				width: 50px;
				height: 50px;
				line-height: 72px;
				background-color: #418FFF;
				text-align: center;
				border-radius: 50%;
				position: fixed;
				right: 20px;
				bottom: 20px;
			}
			
			#sheet1 .mui-table-view {
				margin: 0;
				border-radius: 0;
				text-align: left;
				color: #000;
				left: -10px;
			}
			
			#icon-list li {
				width: 50px;
				float: left;
				text-align: center;
				font-size: 14px;
				margin: 0 10px 5px 10px;
				padding-top: 10px;
			}
			
			.icon-border {
				display: block;
				width: 50px;
				height: 50px;
				border: 1px solid #B3B3B3;
				border-radius: 50%;
				vertical-align: middle;
				line-height: 60px;
				margin-bottom: 10px;
			}
			
			.icon-border img {
				width: 24px;
			}
			
			#note_name {
				padding: 10px;
				border-bottom: 1px solid #CCCCCC;
			}
			
			.share {
				position: absolute;
				left: 320px;
			}
			
			.a1 {
				position: relative;
				margin-left: -14px;
				top: 39px;
				left: -26px;
				font-size: 10px;
			}
			
			.share1 {
				width: 296px;
				height: 70px;
				position: relative;
				left: 60px;
			}
			
			#aaaaaaa li {
				display: inline-block;
				float: left;
				width: 50%;
				border: none;
			}
			
			#aaaaaaa ul {
				border: none;
			}
			
			.mui-grid-view.mui-grid-9 {
				margin: 0;
				padding: 0;
				border-top: 0px solid #eee;
				border-left: 0px solid #eee;
				background-color: #f2f2f2
			}
			
			body {
				margin: 0;
				padding: 0px;
			}
			
			#hidden {
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				z-index: -10;
			}
			
			.icon {
				width: 100px;
				height: 100px;
				margin: auto;
				position: relative;
				left: 150px;
			}
			
			#QRCode {
				position: absolute;
				overflow: hidden;
				display: none;
			}
		</style>
	</head>

	<body οnclick="closeShare();">
		<div class="mui-content">
			<img id="pic" src="img/add.png" style="display: none;" />
		</div>
		<footer style="position: absolute;bottom: 0px; width:100%;background: white;">
			<div style="height: 30px; line-height: 30px ;font-size: 14px; font-family: '黑体'; margin-left:42%; ;margin-top: 50%;">分享笔记</div>
			<ul class="mui-table-view mui-grid-view mui-grid-9" id="aaaaaaa">
				<li onclick="shareHref(1)" class="mui-table-view-cell mui-media mui-col-xs-4 mui-icon mui-icon-weixin">
					<div class="mui-media-body" style="padding-top: 1px;">微信</div>
				</li>
				<li onclick="shareHref(0)" class="mui-table-view-cell mui-media mui-col-xs-4 mui-icon mui-icon-pengyouquan">
					<div class="mui-media-body" style="padding-top: 1px;">朋友圈</div>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-icon mui-icon-paperclip">
					<div class="mui-media-body" style="padding-top: 1px;" onclick="copyText();">复制链接</div>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-icon">
					<i class="fa fa-qrcode" aria-hidden="true">
					<div id="btn">
						<div class="mui-media-body" style="padding-top: 1px;">生成二维码</div>
					</div>
					</i>
				</li>
				<li>
					<input type="text" id="shit" value="" hidden="hidden" />
					<textarea id="hidden"></textarea>
				</li>
				<!--<li>
					<div style="width: 100%; height: 30%; border: 1px;">
				</li>-->
				<div class="icon" id="QRCode"></div>
			</ul>
		</footer>
		<input id="sharehref" style="display: none;" class="sharehref" type="url" value="www.bilibili.com" placeholder="请输入要分享的链接地址" />
		<input id="sharehrefTitle" style="display: none;" class="sharehref" type="text" value="123123" placeholder="请输入要分享的链接标题" />
		<input id="sharehrefDes" style="display: none;" class="sharehref" type="text" value="我正在使用HBuilder+HTML5开发移动应用，赶紧跟我一起来体验！" placeholder="请输入要分享的链接描述" />
	</body>

	<script src="js/jquery-3.4.1.js"></script>
	<script type="text/javascript" charset="utf-8">
		var shares = null;
		var Intent = null,
			File = null,
			Uri = null,
			main = null;
		// H5 plus事件处理
		function plusReady() {
			updateSerivces();
			if(plus.os.name == "Android") {
				main = plus.android.runtimeMainActivity();
				Intent = plus.android.importClass("android.content.Intent");
				File = plus.android.importClass("java.io.File");
				Uri = plus.android.importClass("android.net.Uri");
				main = plus.android.runtimeMainActivity();
			}
			var shareInfo = plus.webview.currentWebview().shareInfo;
			sharehref.value = shareInfo.href;
			$('#shit').val(sharehref.value);
			sharehrefTitle.value = shareInfo.title;
			sharehrefDes.value = shareInfo.content;
			pageSourceId = shareInfo.pageSourceId;
			/*console.log("pageSource:" + pageSourceId);*/
		}
		if(window.plus) {
			plusReady();
		} else {
			document.addEventListener("plusready", plusReady, false);
		}
		/*复制链接*/
		function copyText() {
			var text = document.getElementById("shit").value;
			var input = document.getElementById("hidden");
			input.value = text; // 修改文本框的内容
			input.select(); // 选中文本
			document.execCommand("copy"); // 执行浏览器复制命令
			alert("复制成功");
		}
		//分享的生成二维码
		var bton = document.getElementById("btn");
		var bigBox = document.getElementById("QRCode");
		bton.onclick = function() {
			makeCode();
			bigBox.style.display = "block";
		}
		bton.onmouseout = function() {
			bigBox.style.display = "none";
		}

		var qrcode = new QRCode(document.getElementById("QRCode"), {
			width: 100,
			height: 100
		});

		function makeCode() {
			var elText = document.getElementById("shit");

			if(!elText.value) {
				elText.focus();
				return;
			}

			qrcode.makeCode(elText.value);
		}

		/**
		 * 
		 * 更新分享服务
		 */
		function updateSerivces() {
			plus.share.getServices(function(s) {
				shares = {};
				for(var i in s) {
					var t = s[i];
					shares[t.id] = t;
				}
			}, function(e) {
				outSet("获取分享服务列表失败：" + e.message);
			});
		}

		/**
		 * 分享操作
		 * @param {JSON} sb 分享操作对象s.s为分享通道对象(plus.share.ShareService)
		 * @param {Boolean} bh 是否分享链接
		 */
		function shareAction(sb, bh) {
			if(!sb || !sb.s) {
				console.log("无效的分享服务！");
				return;
			}
			if(plus.os.name !== "Android") {
				plus.nativeUI.alert("此平台暂不支持系统分享功能!");
				return;
			}

			var msg = {
				content: sharehrefDes.value,
				extra: {
					scene: sb.x
				}
			};
			if(bh) {
				msg.href = sharehref.value;
				if(sharehrefTitle && sharehrefTitle.value != "") {
					msg.title = sharehrefTitle.value;
				}
				if(sharehrefDes && sharehrefDes.value != "") {
					msg.content = sharehrefDes.value;
				}
				msg.thumbs = ["images/icon.png"];
				msg.pictures = ["images/icon.png"];
			} else {
				if(pic && pic.realUrl) {
					msg.pictures = [pic.realUrl];
				}
			}
			// 发送分享
			if(sb.s.authenticated) {
				console.log("---已授权---");
				shareMessage(msg, sb.s);
			} else {
				console.log("---未授权---");
				sb.s.authorize(function() {
					shareMessage(msg, sb.s);
				}, function(e) {
					console.log("认证授权失败：" + e.code + " - " + e.message);

				});
			}
		}

		function shareMessage(msg, s) {

			console.log(JSON.stringify(msg));
			s.send(msg, function() {
				console.log("分享到\"" + s.description + "\"成功！ ");

			}, function(e) {
				console.log("分享到\"" + s.description + "\"失败: " + JSON.stringify(e));

			});
		}
		// 分析链接
		function shareHref(index) {
			console.log(index);
			var shareBts = [];
			// 更新分享列表
			var ss = shares['weixin'];
			ss && ss.nativeClient && (shareBts.push({
					title: '微信朋友圈',
					s: ss,
					x: 'WXSceneTimeline'
				}),
				shareBts.push({
					title: '微信好友',
					s: ss,
					x: 'WXSceneSession'
				}));
			/*			ss = shares['qq'];
						ss && ss.nativeClient && shareBts.push({
							title: 'QQ',
							s: ss
						});*/

			console.log(ss);
			shareAction(shareBts[index], true);
		}

		mui.back = function() {
			var sourcePage = plus.webview.getWebviewById(pageSourceId);
			if(sourcePage) {
				sourcePage.evalJS("closeMask()");
			}
		}

		function closeShare() {
			console.log("e:" + event.target.name);
		}
	</script>

</html>